<template>
  <div style="position: relative; z-index: 1;">
    <div v-if="mode == 'horizontal'" class="slider-top">
      <nav-menu  :default-active="onRoutes" class="menu-demo" mode="horizontal" @select="handleSelect" router>
        <template v-for="item in menu-list">
          <template v-if="item.children">
            <submenu :index="item.index">
              <template slot="title"><i :class="item.icon"></i><span slot="title">{{ item.title }}</span></template>
              <menu-items v-for="(subItem,i) in item.children" :key="i" :index="subItem.index">{{ subItem.title }}
              </menu-items>
            </submenu>
          </template>
          <template v-else>
            <menu-items :index="item.index">
              <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
            </menu-items>
          </template>
        </template>
      </nav-menu>
    </div>

  <div class="slider-left" v-else>
    <nav-menu :default-active="onRoutes" class="menu-vertical-demo" :router="router" :collapse="collapse" :unique-opened="uniqueOpened" :theme="theme">
      <template v-for="item in list">
        <template v-if="item.children">
          <submenu :index="item.index">
            <template slot="title"><i :class="item.icon" v-if="item.icon"></i><span slot="title">{{ item.title }}</span></template>
            <!--<menu-items v-for="(subItem,i) in item.children" :key="i" :index="subItem.index"><i :class="subItem.icon" v-if="subItem.icon"></i>{{ subItem.title }}</menu-items>-->
            <template v-for="subItem in item.children">
              <template v-if="subItem.children">
                <submenu :index="subItem.index">
                  <template slot="title"><i :class="subItem.icon" v-if="subItem.icon"></i>{{ subItem.title }}</template>
                  <menu-items v-for="(subItem1,i) in subItem.children"  :key="i" :index="subItem1.index" v-if="itemShow(subItem1)"><i :class="subItem1.icon" v-if="subItem1.icon"></i>{{ subItem1.title }}</menu-items>
                </submenu>
              </template>
              <template v-else>
                <menu-items :index="subItem.index" v-if="itemShow(subItem)">
                  <i :class="subItem.icon" v-if="subItem.icon"></i><span slot="title">{{ subItem.title }}</span>
                </menu-items>
              </template>
            </template>
          </submenu>
        </template>
        <template v-else>
          <menu-items :index="item.index" v-if="itemShow(item)">
            <i :class="item.icon" v-if="item.icon"></i><span slot="title">{{ item.title }}</span>
          </menu-items>
        </template>
      </template>
    </nav-menu>

  </div>



  </div>
</template>

<script>
  import _ from 'lodash'
  import NavMenu from './src/menu'
  import MenuItems from './src/menu-item'
  import MenuItemGroup from './src/menu-item-group'
  import Submenu from './src/submenu'
  import MenuSubmenu from './src/menu-submenu'

  export default {
    components: {
      NavMenu,
      MenuItems,
      MenuItemGroup,
      Submenu,
      MenuSubmenu
    },
    computed: {
      onRoutes () {
        return this.$route.path.replace('/', '')
      }
    },
    mounted () {
      window.test = this
    },
    props: {
      collapse: {
        type: Boolean,
        default: false
      },
      mode: {
        type: String,
        default: 'vertical'
      },
      uniqueOpened: {
        type: Boolean,
        default: true
      },
      router: {
        type: Boolean,
        default: true
      },
      theme: {
        type: String,
        default: 'light'
      },
      list: Array
    },
    data () {
      return {
      }
    },
    methods: {
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      },
      handleSelect (key, keyPath) {
        console.log(key, keyPath)
      },
      itemShow (item) {
        if (_.isNil(item.show)) {
          return true
        }
        if (_.isFunction(item.show)) {
          return item.show(item)
        }
        return item.show
      }
    }
  }
</script>

<style lang="scss">
  .menu-demo{
    height:60px;
  }

  .slider-left{
    /*width: 200px;*/
    background-color: #eef1f6;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    /*overflow-x: hidden;*/
    /*overflow-y:scroll;*/
  }

  .slider-top{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }
</style>


